<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-30 19:55:13
-->
<template>
  <DvBorderBox8>
    <div style="padding: 10px 5px; height: 278px">
      <header
        style="
          color: aqua;
          font-weight: bold;
          font-style: italic;
          font-size: 16px;
        "
      >
        关键词搜索
      </header>
      <main class="main">
        <el-row :gutter="2">
          <el-col :span="12" :offset="0">
            <div style="font-size: 12px; color: #fff">搜索用户数</div>
            <div style="font-size: 12px; color: #fff; font-style: italic">
              {{ userTotal }}
            </div>
            <div class="chart">
              <v-chart :option="getOptions(1)" autoresize></v-chart>
            </div>
          </el-col>
          <el-col :span="12" :offset="0">
            <div style="font-size: 12px; color: #fff">搜索量</div>
            <div style="font-size: 12px; color: #fff; font-style: italic">
              {{ countTotal }}
            </div>
            <div class="chart">
              <v-chart :option="getOptions(2)" autoresize></v-chart>
            </div>
          </el-col>
        </el-row>
      </main>
      <vxe-table
        align="center"
        size="mini"
        border
        show-overflow
        :row-config="{ height: 22 }"
        :data="tableData"
      >
        <vxe-column type="seq" title="排名"></vxe-column>
        <vxe-column field="word" title="关键字"></vxe-column>
        <vxe-column field="count" title="搜索量"></vxe-column>
        <vxe-column field="user" title="搜索用户数"></vxe-column>
        <vxe-column field="proportion" title="搜索占比"></vxe-column>
      </vxe-table>
      <vxe-pager
        v-model:current-page="page"
        v-model:page-size="limit"
        :total="searchWord.length"
        size="mini"
        style="text-align: left; background-color: transparent"
        :layouts="['PrevPage', 'Number', 'NextPage', 'Total']"
      ></vxe-pager>
      />
    </div>
  </DvBorderBox8>
</template>

<script lang="ts" setup>
import { useEchartsStore } from '@/stores/echarts'
import { computed, ref } from 'vue'
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'

const echartsStore = useEchartsStore()
const page = ref(1)
const limit = ref(5)

const searchWord = computed(() => {
  return echartsStore.echartsData.searchWord || []
})

const wordList = computed(() => {
  return searchWord.value.map((item: any) => {
    return item.word
  })
})
const countList = computed(() => {
  return searchWord.value.map((item: any) => {
    return item.count
  })
})
const userList = computed(() => {
  return searchWord.value.map((item: any) => {
    return item.user
  })
})
const userTotal = computed(() => {
  return userList.value.reduce((pre: any, item: any) => {
    return pre + item
  }, 0)
})
const countTotal = computed(() => {
  return countList.value.reduce((pre: any, item: any) => {
    return pre + item
  }, 0)
})
const allTableData = computed(() => {
  return searchWord.value.map((item: any) => {
    item.proportion = ((item.count / countTotal.value) * 100).toFixed(2) + '%'
    return item
  })
})

const tableData = computed(() => {
  return allTableData.value.slice(
    (page.value - 1) * limit.value,
    page.value * limit.value,
  )
})

const getOptions = (num: number) => {
  return {
    tooltip: { trigger: 'axis' },
    xAxis: {
      data: wordList.value || [],
      show: false,
    },
    grid: {
      top: 0,
      bottom: 8,
      left: 0,
      right: 0,
    },
    yAxis: {
      show: false,
    },
    series: {
      name: num === 1 ? '搜索用户数' : '搜索量',

      type: 'line',
      smooth: true,
      data: (num === 1 ? userList.value : countList.value) || [],
      areaStyle: {
        color: 'hotpink',
      },
      itemStyle: {
        opacity: 0,
      },
      lineStyle: {
        opacity: 0,
      },
    },
  }
}
</script>

<script lang="ts">
export default {
  name: 'BottomLeft',
}
</script>

<style lang="scss" scoped>
.chart {
  height: 40px;
}
:deep(.vxe-pager--next-btn) {
  background-color: transparent;
}
:deep(.vxe-pager--num-btn) {
  background-color: transparent;
  border: none;
}
:deep(.vxe-pager--prev-btn) {
  background-color: transparent;
}
:deep(.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):active) {
  background-color: transparent;
}
:deep(.vxe-pager .vxe-pager--next-btn:not(.is--disabled):active) {
  background-color: transparent;
}
:deep(.vxe-pager .vxe-pager--num-btn:not(.is--disabled):active) {
  background-color: transparent;
}
</style>
